const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    //入口起点：
    entry:'./src/index',
    //输出
       output:{
        filename:'built.js',
        //输出的路径 __dirname是Node里面的变量，代表当前文件的目录的绝对路径
    	//下面这种写法，这个例子，就是解压到这个文件同级下的build文件夹下面的built.js
        path:resolve(__dirname,'build')
    },
        //loader配置
        module:{
            rules:[
                // 详细的Loader配置
                // 匹配哪些文件
                {
                    test:/\.less$/,
                    // 使用哪些loader
                    // 使用这些loader前我们一般都会在项目最外层下载这些依赖。因为npm会一层一层往上面找。所以我们就放在最外面一层 npm i webpack webpack-cli -D
                    // npm i css-loader style-loader -D
                    use:[
                        //use数组中loader执行的顺序：从右到左，从上到下，依次执行
                        // 创建了style标签，将js中的样式资源插入进行，添加到head中
                        'style-loader',
                        // 将css文件编译成commonjs模块加载到js中，里面内容是样式字符串
                        'css-loader',
                        'less-loader'
                    ]
                },
                // 处理图片资源
                {
                    test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    // 图片大小小于8kb，就会被base64解析成字符串以减轻服务器的压力（减少了请求数量）。但是缺点就是体积会变大（文件请求速度更慢）。所以我们不会对大图片base64处理，只会对小图片base64处理
                    limit:8*1024,
                }
                }
            ]
        },
        plugins:[
            // 详细的plugins配置
            // 默认会创建一个html文件，并且自动引入我们打包后的js,css文件
            new HtmlWebpackPlugin({
                // 创建一个下面这个路径的html文件，并且自动引入打包输出的资源
                template:'./src/index.html'
            })
        ],
        mode:'development',
        // mode:'production'
}